<template>
  <div class="page">
    <van-tabs class="tabs_cls" v-model:active="active" animated @click-tab="handleTabChange" color="#FF4042"
      title-active-color="#FF4042">
      <van-tab v-for="item in ['信用卡', '储蓄卡']" :title="item" :key="item">
        <div class="tabs_wrap" v-if="active == 0">
          <div v-if="creditList.value && creditList.value.length > 0">
            <div class="bank_box flex" v-for="(item, index) in creditList.value" :key="item.binBankId"
              @click="handleChangeCard(index, item)">
              <div class="bank_box_icon_box">
                <div :class="`img bank-img ${item.binBankId}`"></div>
              </div>
              <div class="card_name">{{ item.name }}</div>
              <div class="bank_box_right_icon flex_center" v-if="route.query && route.query.showType != 'readonly'">
                <!-- <img v-if="index == activeTwo" class="img" src="@/assets/check_dui.png" alt=""> -->
                <!-- <img v-else class="img" src="@/assets/uncheck_dui.png" alt=""> -->
              </div>

            </div>
          </div>
          <div v-else>
            <van-empty description="暂无支持银行数据" />
          </div>
          <!-- <van-button v-if="isBtnShow" class="global_btn read_btn" type="danger" @click="handlePrev">返回</van-button> -->
        </div>
        <div class="tabs_wrap" v-else>
          <div v-if="debitList.value && debitList.value.length > 0">
            <div class="bank_box flex" v-for="(item, index) in debitList.value" :key="item.binBankId"
              @click="handleChangeCard(index, item)">
              <div class="bank_box_icon_box">
                <div :class="`img bank-img ${item.binBankId}`"></div>
              </div>
              <div class="card_name">{{ item.name }}</div>
              <div class="bank_box_right_icon flex_center" v-if="route.query && route.query.showType != 'readonly'">
                <!-- <img v-if="index == activeTwo" class="img" src="@/assets/check_dui.png" alt=""> -->
                <!-- <img v-else class="img" src="@/assets/uncheck_dui.png" alt=""> -->
              </div>
            </div>
          </div>
          <div v-else>
            <van-empty description="暂无支持银行数据" />
          </div>
          <!-- <van-button v-if="route.query && route.query.showType == 'readonly' && creditList.value.length"
            class="global_btn read_btn" type="danger" @click="handlePrev">返回</van-button> -->
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { enableBankListH5 } from '@/api/api.js'
import { reactive, ref, onMounted, getCurrentInstance, inject, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCounterStore } from '../../store/counter';
const counter = useCounterStore()
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute();
const active = ref(0)
const activeTwo = ref(null)
const isBtnShow = ref(false)
const showArr = reactive([])
const bankList = reactive([
  {},
  {},
  {},
  {},
])
const creditList = reactive([])
const debitList = reactive([])
onMounted(async () => {
  // if (route.query.showType == 'readonly') {
  // }
  await getAipList()
  if (route.query && route.query.showType == 'readonly') {
    isBtnShow.value = true
  } else {
    isBtnShow.value = false
  }
})
const getAipList = async () => {
  let merIdParam = proxy.$globalFn.getStorage('urlParameters').merId
  let res = await enableBankListH5({ merId: merIdParam })
  try {
    if (res.retCode == '0000') {
      creditList.value = res.data.creditList || []
      debitList.value = res.data.debitList || [];
      console.log("🚀 ~ getAipList ~ debitList.value:", debitList.value)
      // showArr.value = []
      // if (creditList.value.length > 0 && debitList.value.length > 0) {
      //   showArr.value = ['信用卡', '储蓄卡']
      // } else if (creditList.value.length > 0 && debitList.value.length == 0) {
      //   console.log(11111);
      //   active.value = 0
      //   showArr.value = ['信用卡']
      // } else if (debitList.value.length > 0 && creditList.value.length == 0) {
      //   console.log(22222);
      //   active.value = 1
      //   showArr.value = ['储蓄卡']
      // } else {
      //   showArr = [] // 两个tab都不展示
      // }
    }
  } catch (err) {
    console.log(err)
    router.push({
      path: '/fail'
    });
  }
}
const handlePrev = () => {
  router.push({
    path: '/formBank'
  })
}
const handleTabChange = (value) => {
  activeTwo.value = null
}
const handleChangeCard = (index, item) => {
  if (route.query && route.query.showType == 'readonly') return
  activeTwo.value = index
  setTimeout(() => {
    router.push({
      path: '/bindCard',
      query: { binBankId: item.binBankId, binBankName: item.name, bankCardType: item.type, flow: 'next' }
    })
  }, 1000);
}
const handleChooseBank = () => {
  router.push({
    path: '/bankCardList'
  })
}
</script>

<style lang="sass" scoped>
@import '@/styles/variables.scss'
.page
  height: 100%
  background: #fff
  // padding: 0px 24px
.inp_box
  display: flex
  // align-items: center
.inp_box_label
  width: 80px
  white-space: nowrap
  font-size: 15px
  text-align: left
.other_bank
  color: blue
  font-size: 15px
  white-space: nowrap
.inp_text
  width: 150px
  height: 20px
  font-size: 15px
.inp_text::placeholder
  color: #CFCFCF
.verify
  color: $global_color
  font-size: 15px
.footer
  margin-top: 100px
.bank_box_icon_box
  width: 24PX
  height: 24PX
  margin-right: 13px
.bank_box_right_icon
  width: 19px
  height: 19px
  position: absolute
  right: 0px
.tabs_wrap
  padding: 0px 24px
.bank_box
  padding: 16px 0 16px 0
  border-bottom: 1px solid #DEDEDE
  position: relative
.card_name
  font-size: 15px
:deep(.tabs_cls)
  font-size: 15px
:deep(.van-tabs__wrap)
  border-bottom: 1px solid #DEDEDE
:deep(.van-tab--active)
  font-weight: 500
:deep(.van-tabs__line)
  height: 2px
.read_btn
  margin-top: 20px
  margin-bottom: 20px
:deep(.van-tabs__line)
  height: 2px !important
  // bottom: 10px !important
</style>
